<template>
  <view class="display-detail">
    <CommonHeader>{{
      approvalType === 0
        ? displayDetailInfo.processName === '销假、销出差'
          ? '销除申请'
          : displayDetailInfo.processName + '申请'
        : displayDetailInfo.processName === '销假、销出差'
        ? displayDetailInfo.username + '的销除申请'
        : displayDetailInfo.username + '的' + displayDetailInfo.processName
    }}</CommonHeader>
    <view class="detail-content">
      <view class="pop-content">
        <view class="pop-form">
          <van-field
            :value="displayDetailInfo.username"
            label="发起人"
            label-class="label-class"
            input-class="input-class"
            disabled
          />
          <van-field
            :value="displayDetailInfo.jobNumber"
            label="工号"
            label-class="label-class"
            input-class="input-class"
            disabled
          />
          <van-field
            :value="displayDetailInfo.departmentName"
            label="部门"
            label-class="label-class"
            input-class="input-class"
            disabled
          />
          <van-field
            :value="
              displayDetailInfo.processName === '销假、销出差'
                ? '销除'
                : displayDetailInfo.processName
            "
            label="审批类型"
            label-class="label-class"
            input-class="input-class"
            disabled
          />
          <van-field
            :value="formDateIOS(displayDetailInfo.procApplyTime)"
            label="申请时间"
            label-class="label-class"
            input-class="input-class"
            disabled
          />
          <!-- 此处增加特色字段 -->
          <van-field
            v-for="(item, index) in displaySpecialInfo"
            :key="index"
            :label="item.label"
            :value="item.value"
            type="textarea"
            placeholder="未填写"
            autosize
            :border="false"
            label-class="label-class"
            input-class="input-class"
            disabled
          />
        </view>
      </view>
      <view class="time-line">
        <view class="time-line-title">
          审批状态：{{
            selectStateList[Number(this.displayDetailInfo.processState)] || ''
          }}
        </view>
        <view v-if="scheduleList.length !== 0">
          <view
            v-for="item in scheduleList"
            :key="item ? item.taskId : null"
            class="time-line-item"
            :class="
              item
                ? item.handleType === '1'
                  ? 'undone-ball'
                  : item.taskId === scheduleList[scheduleList.length - 1].taskId
                  ? 'last-ball'
                  : 'done-ball'
                : null
            "
          >
            <view class="time-line-ball" />
            <view class="time-line-type">
              {{ item ? item.taskName : null }}
            </view>
            <view class="time-line-name">
              {{
                item
                  ? item.handleType === '1'
                    ? '待定'
                    : item.handleUserName
                  : null
              }}
            </view>
            <view class="time-line-date">
              {{
                item
                  ? item.handleType === '1'
                    ? ''
                    : formDate(item.handleTime)
                  : null
              }}
            </view>
          </view>
        </view>
        <view class="empty-state" v-else>
          暂时查找不到审批状态哦，稍后再来吧！
        </view>
      </view>
      <view class="operation-button">
        <view v-if="approvalType === 0" class="my-approval">
          <van-button
            v-if="
              displayDetailInfo.processState === '0' ||
                displayDetailInfo.processState === '1'
            "
            type="warning"
            size="large"
            @click="applicationCanceled"
          >
            撤销申请
          </van-button>
          <van-button
            v-if="displayDetailInfo.processState === '5'"
            type="primary"
            size="large"
            @click="goTo('/pages/classification/approval/destroy/index')"
          >
            处理待销
          </van-button>
        </view>
        <view v-if="approvalType === 1" class="upcoming-approval">
          <van-field
            :value="message"
            rows="2"
            autosize
            label="审批意见"
            type="textarea"
            maxlength="80"
            placeholder="请输内容"
            label-class="label-class"
            input-class="input-class"
            show-word-limit
            @change="message = $event.mp.detail"
          />
          <view class="button-group">
            <van-button type="primary" size="large" @click="approvalSuccess">
              通过
            </van-button>
            <van-button type="danger" size="large" @click="approvalRejected">
              驳回
            </van-button>
          </view>
        </view>
      </view>
    </view>
    <van-toast id="van-toast" />
  </view>
</template>
<script src="./script.js"></script>
<style src="./style.less" lang="less"></style>
